<template>
    <div ref="main" style="width: 100%;height: 100%;"></div>
</template>

<script setup>
    import { ref, onMounted } from 'vue';
    import * as echarts from 'echarts';

    const main = ref(null); // 使用ref来创建一个响应式引用
    let myChart = null; // 初始化ECharts实例的变量

    onMounted(() => {
        if (main.value) { // 确保DOM元素已经渲染
            myChart = echarts.init(main.value); // 初始化ECharts实例
            const option = {
                tooltip: { // 添加 tooltip 配置
                    trigger: 'item', // 鼠标悬停在数据项上时触发
                    formatter: function(params) {
                        // 自定义显示内容，params 包含了当前数据点的信息
                        return ` ${params.value}`;
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['11日', '12日', '13日', '14日', '15日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [20, 32, 11, 34, 90, ],
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            };
            myChart.setOption(option); // 设置ECharts选项
        }
    });
</script>

<style>
/* 可以在这里添加样式 */
</style>

<!-- <template>
    <div ref="main" style="width: 100%;height: 100%;"></div>
</template>

<script setup>
    import {
        ref,
        onMounted,
        watchEffect // 引入watchEffect来响应数据变化
    } from 'vue';
    import * as echarts from 'echarts';
    import axios from 'axios'; // 假设使用axios进行HTTP请求

    const main = ref(null); // 使用ref来创建一个响应式引用
    let myChart = null; // 初始化ECharts实例的变量
    const chartData = ref({ xAxisData: [], seriesData: [] }); // 用于存储从后端获取的数据

    // 获取后端数据的函数
    const fetchData = async () => {
        try {
            const response = await axios.get('/api/chart-data'); // 假设后端数据接口为/api/chart-data
            chartData.value = response.data;
        } catch (error) {
            console.error('Error fetching chart data:', error);
        }
    };

    onMounted(() => {
        if (main.value) { // 确保DOM元素已经渲染
            myChart = echarts.init(main.value); // 初始化ECharts实例
            fetchData(); // 组件挂载后立即获取数据
        }
    });

    // 监听chartData的变化，更新图表
    watchEffect(() => {
        if (myChart && chartData.value.xAxisData.length > 0 && chartData.value.seriesData.length > 0) {
            updateChart();
        }
    });

    // 更新图表的函数
    const updateChart = () => {
        const option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: chartData.value.xAxisData // 使用从后端获取的X轴数据
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: chartData.value.seriesData, // 使用从后端获取的系列数据
                    type: 'line',
                    areaStyle: {}
                }
            ]
        };
        myChart.setOption(option); // 设置ECharts选项
    };
</script>

<style>
/* 可以在这里添加样式 */
</style> -->

<!-- {
    "xAxisData": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    "seriesData": [820, 932, 901, 934, 1290, 1330, 1320]
} -->